<template>
	<view class="content">
		<!-- <cu-custom :isBack="true" bgColor="bg-gradual-red">
			<block slot="content">搜索</block>
		</cu-custom> -->
		<view class="nav-bar">
			<image src="../../../static/back_icon.png" @tap="back" mode=""></image>
			<view class="center">
				<input v-model="keyword" class="input" @input="tet" focus placeholder="搜索你想要的商品" />
				<image src="../../../static/home/clear.png" @tap="clearIn"  v-if="hid" mode=""></image>
			</view>
			<text class="text" @tap="search(keyword)">搜索</text>
		</view>
		<!-- 搜索结果 -->
		<view class="result" v-if="boolSearchResult">
			<view class="name">
				<view class="left" @tap="store(1)">
					<view class="">
						商品
					</view>
					<view class="bord" v-show="shop"></view>
				</view>
				<view class="right" @tap="store(2)">
					<view class="">
						店铺
					</view>
					<view class="bord" v-show="!shop"></view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="" v-if="shop">
				<view class="title">
					<view :class="title==1?'checked':''" @tap="synt(1)">
						综合
					</view>
					<view :class="title==2?'checked':''" @tap="synt(2)">
						佣金比例
					</view>
					<view :class="title==3?'checked':''" @tap="synt(3)">
						销量
					</view>
					<view class="discount">
						<view :class="title==4?'checked':''" @tap="synt(4)">
							折扣价
						</view>
						<view class="">
							<view class="up">
								<image :src="titleUp&&title==4?'../../../static/home/order_uped.png':'../../../static/home/order_up.png'" mode=""></image>
							</view>
							<view class="down">
								<image :src="!titleUp&&title==4?'../../../static/home/order_downed.png':'../../../static/home/order_down.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item-list" @tap="jump">
						<view class="img">
							<image src="../../../static/home/poster.png" mode=""></image>
						</view>
						<view class="right">
							<view class="list-name">
								<text>花器客厅电视柜家居装饰摆件花器客厅电视柜家居装饰摆件</text>
							</view>
							<view class="eye">
								<view class="left">
									佣金6%
								</view>
								<view class="right">
									已售1.5万
								</view>
							</view>
							<view class="dis">
								<text class="left">折扣</text>
								¥<text class="center">83.00</text>
								<text class="right">¥149</text>
							</view>
							<view class="bttn" @tap="productDetail">
								<image src="../../../static/home/icon-proed.png" mode=""></image>
								<text class="center">赚</text>
								<text class="right">¥2.13</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺 -->
			<view class="" v-if="!shop">
				<!-- 店铺选择 -->
				<view class="stile">
					<view :class="storeNo==1?'checked':''" @tap="storeNa(1)">
						收益笔数
					</view>
					<view :class="storeNo==2?'checked':''" @tap="storeNa(2)">
						提成
					</view>
					<view :class="storeNo==3?'checked':''" @tap="storeNa(3)">
						宝贝数
					</view>
				</view>
				<view class="sitem">
					<view class="sitem-list">
						<view class="portrait">
							<view class="left">
								<image src="" mode=""></image>
							</view>
							<view class="right">
								<view class="top">
									三良洋货店
								</view>
								<view class="down">
									5000人收藏
								</view>
							</view>
						</view>
						<view class="deduct" >
							<view class="left">
								<text class="left">平均提成：</text>
								<text class="right">9.95%</text>
							</view>
							<view class="right">30天有收益笔数：19455</view>
						</view>
						<view class="deduct">
							<view class="left">
								<text class="left">宝贝数量：</text>
								<text class="right">356件</text>
							</view>
							<view class="right">30天有收益笔数：19455</view>
						</view>
						<view class="sbtn" @tap="shareShop">
							分享赚钱
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 历史搜索 -->
		<view class="keyword-block" v-if="!boolSearchResult&&oldKeywordList.length>0">
			<view class="keyword-list-header">
				<view>最近搜索</view>
				<view>
					<image @tap="oldDelete" src="/static/home/delete.png"></image>
				</view>
			</view>
			<view class="keyword">
				<view class="world" v-for="(keyword,index) in oldKeywordList" @tap="dosearch(keyword)" :key="index">{{keyword}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hid:false,
				keyword:'',
				oldKeywordList:[],
				boolSearchResult:false,//是否显示搜索结果
				shop:true,
				title:1,
				titleUp:false,
				// 店铺
				storeNo:1,
				
			};
		},
		onLoad() {
			this.loadOldKeyword();
		},
		methods:{
			//详情页面
			productDetail(){
				uni.navigateTo({
					url:"/pages/homes/productDetail/productDetail"
				})
			},
			// 店铺方法集合
			storeNa(index){
				this.storeNo=index;
			},
			//综合选择
			synt(index){
				this.title=index;
				if(index==4){
					this.titleUp=!this.titleUp;
				}else{
					this.titleUp=false;
				}
			},
			//导航方法
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			tet(event){
				this.keyword = event.target.value;
				if (event.target.value.length > 0) {
					this.hid = true;
				} else {
					this.boolSearchResult=false;
					this.hid = false;
				}
			},
			clearIn(){
				this.keyword='';
				this.boolSearchResult=false;
				this.hid = false;
			},
			search(keyword){
				if(this.keyword==""){
					uni.showToast({
						icon:'none',
						title:'请输入搜索商品'
					})
				}else{
					this.boolSearchResult=true;
					this.saveKeyword(keyword); //保存为历史 
				}
			},
			// 店铺商品选择
			store(index){
				if(index==1){
					this.shop=true;
				}else{
					this.shop=false;
				}
			},
			//店铺选择
			shareShop(){
				uni.navigateTo({
					url:"/pages/homes/shopShare/shopShare"
				})
			},
			//点击历史搜索
			dosearch(keyword){
				this.keyword=keyword;
				this.hid = true;
				this.search(keyword);
			},
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							this.oldKeywordList = [];
							uni.removeStorage({
								key: 'OldKeys'
							});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						// console.log(res.data);
						var OldKeys = JSON.parse(res.data);
						var findIndex = OldKeys.indexOf(keyword);
						if (findIndex == -1) {
							OldKeys.unshift(keyword);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: (e) => {
						var OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			},
			jump(){
				uni.navigateTo({
					url:'/pages/homes/productDetail/productDetail'
				})
			}
		}
	}
</script>
 
<style scoped lang="scss">
	page{
		background: #FFFFFF;
	}
	.nav-bar{
		height: 128upx;
		padding-top: 40upx;
		background: #E8271B;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		image{
			width: 48upx;
			height: 48upx;
			margin-left:28upx ;
		}
		.center{
			width:493upx;
			height:64upx;
			background:rgba(255,255,255,1);
			border-radius:32upx;
			.input{
				padding-left: 30upx;
				width:493upx;
				height:64upx;
				background:rgba(255,255,255,1);
				border-radius:32upx;
			}
			image{
				position: absolute;
				top:60upx;
				right:155upx;
			}
		}
		.text{
			margin-right: 40upx;
			font-size:36upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
	.result{
		padding-top: 128upx;
		.name{
			height: 72upx;
			background:#E8271B;
			font-weight:bold;
			font-size:32upx;
			color:rgba(255,255,255,1);
			display: flex;
			justify-content: center;
			padding-top: 17upx;
			.left,.right{
				margin: 0 80upx;
				width:64upx ;
				.bord{
					width: 35upx;
					height: 6upx;
					background: #FFFFFF;
					margin: 0 auto;
					border: 1upx solid #FFFFFF;
					border-radius: 5upx;
				}
			}
		}
		// 商品信息
		.title{
			display: flex;
			justify-content:space-between;
			align-items: center;
			height: 100upx;
			margin: 0 28upx;
			font-size:28upx;
			font-weight:500;
			color:rgba(77,77,77,1);
			.discount{
				display: flex;
				height: 100upx;
				align-items: center;
				.up,.down{
					width: 16upx;
					height: 16upx;
					display: block;
					margin-left:10upx;
					image{
						display:block;
						width: 16upx;
						height: 16upx;
					}
				}
			}
			.checked{
				color:rgba(246,56,16,1);
			}
		}
		.list{
			background:#F2F2F2;
			padding: 30upx 28upx;
			.item-list{
				padding: 20upx;
				background: #FFFFFF;
				border-radius:20upx;
				height:338upx;
				display: flex;
				.img{
					image{
						width: 280upx;
						height: 280upx;
						border-radius:10upx;
						margin-right:20upx;
					}
				}
				.right{
					.list-name{
						margin-top: 10upx;
						font-size:24upx;
						font-weight:500;
						line-height:29upx;
						color:rgba(51,51,51,1);
						image{
							width: 60upx;
							height: 28upx; 
							margin-right:5upx ;
						}
					}
					.eye{
						display: flex;
						justify-content: space-between;
						margin-top: 10upx;
						.left{
							text-align: center;
							width:108upx;
							height:40upx;
							font-size:22upx;
							font-weight:500;
							line-height:40upx;
							color:rgba(230,18,5,1);
							background:rgba(232,39,27,0.2);
							border-radius:10upx;
						}
						.right{
							font-size:22upx;
							font-weight:500;
							line-height:28px;
							color:rgba(153,153,153,1);
						}
					}
					.dis{
						font-size: 22upx;
						color:rgba(232,39,27,1);
						margin-top: 15upx;
						.left{
							color:rgba(153,153,153,1);
							margin-right: 10upx;
						}
						.center{
							font-size:28upx;
							font-weight:bold;
							margin-right: 10upx;
						}
						.right{
							color:rgba(204,204,204,1);
							font-size:20upx;
							text-decoration: line-through;
						}
					}
					.bttn{
						width:228upx;
						height:60upx;
						background:rgba(232,39,27,1);
						border-radius:30upx;
						font-size:22upx;
						color:rgba(255,255,255,1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 30upx  0 0 125upx;
						image{
							width: 36upx;
							height: 36upx;
							display:inline-block;
						}
						.center{
							margin: 5upx 10upx 0;
						}
						.right{
							font-weight:bold;
							font-size:32upx;
						}
					}
				}
			}
			
		}
		//店铺页面信息
		.stile{
			height:100upx;
			background:rgba(255,255,255,1);
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size:28upx;
			font-weight:500;
			color:rgba(77,77,77,1);
			.checked{
				color:rgba(246,56,16,1);
			}
		}
		.sitem{
			background:rgba(242,242,242,1);
			padding: 30upx 28upx;
			.sitem-list{
				background: #FFFFFF;
				height:390upx;
				padding:40upx 30upx 20upx;
				border-radius:20upx;
				.portrait{
					display: flex;
					align-items: center;
					height:100upx;
					margin-bottom: 10upx;
					.left{
						image{
							width: 100upx;
							height: 100upx;
							border-radius: 50%;
							background: red;
							margin-right: 20upx;
						}
					}
					.right{
						.top{
							font-size:28upx;
							font-weight:bold;
							line-height:35upx;
							color:rgba(51,51,51,1);
						}
						.down{
							font-size:24upx;
							font-weight:500;
							line-height:40upx;
							color:rgba(153,153,153,1);
						}
					}
				}
				.deduct{
					display: flex;
					line-height: 50upx;
					.left{
						width: 338upx;
						margin-left: 10upx;
						.left{
							font-size:24upx;
							font-weight:bold;
							color:#999999;
						}
						.right{
							font-size:32upx;
							font-weight:bold;
							color:rgba(51,51,51,1);
						}
					}
					.right{
						line-height: 50upx;
						font-size:24upx;
						font-weight:500;
						color:rgba(153,153,153,1);
					}
				}
				.sbtn{
					margin-top: 20upx;
					text-align: center;
					width:634upx;
					height:88upx;
					border:1px solid rgba(246,56,16,1);
					border-radius:44upx;
					font-size:32upx;
					font-weight:500;
					line-height:88upx;
					color:rgba(246,56,16,1);
				}
			}
		}
	}
	.keyword-block{
		padding: 20upx;
		padding-top: 130upx;
		.keyword-list-header {
			font-size:28upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			margin:10upx;
			display: flex;
			justify-content: space-between;
			image {
				width: 40upx;
				height: 40upx;
			}
		}
		.keyword {
			display: flex;
			flex-flow: wrap;
			justify-content: flex-start;
			.world{
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius:28upx;
				padding: 0 10upx;
				margin: 10upx;
				height: 60upx;
				font-size: 28upx;
				background:rgba(242,242,242,1);
				color: #6b6b6b;
			}
		}
	}
	
</style>
